import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
// import { Button, notification, Card, Alert } from 'antd';
import { Button, Card, Form, Input } from 'antd';
import { FormComponentProps } from 'antd/es/form';
// import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

//@ts-ignore
import emojiToolkit from 'emoji-toolkit';

import helps from '@/utils/helps';
import one from '@/internal/one';

// import {ReactiveBase,SingleList,ResultList,SingleDropdownRange} from '@appbaseio/reactivesearch';
// import ImageWrapper from '@/components/ImageWrapperDemo'; // @ 表示相对于源文件根目录
// import RenderAuthorized from 'ant-design-pro/lib/Authorized';
// import RenderAuthorized from '@/components/Authorized';

// const Authorized = RenderAuthorized('user');
// const noMatch = <Alert message="No permission." type="error" showIcon />;

interface Props extends FormComponentProps {
  submitting: boolean;
  dispatch: Dispatch<any>;
  demoOne: any;
}

interface State {
  value: number;
}

@connect(
  ({
    demoOne,
    loading,
  }: {
    demoOne: any;
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
    demoOne,
    submitting: loading.effects['demoOne/submitRegularForm'],
  }),
)
class One extends Component<Props, State> {
  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void {
    console.log('componentDidUpdate');

    console.log(one.Account);
  }

  hello = (e: React.FormEvent) => {
    e.preventDefault();
    const allMenus = [
      {
        id: 1,
        pid: 0,
        name: '安徽',
      },
      {
        id: 2,
        pid: 1,
        name: '阜阳',
      },
      {
        id: 3,
        pid: 2,
        name: '阜南',
      },

      {
        id: 4,
        pid: 2,
        name: '临泉',
      },
      {
        id: 5,
        pid: 0,
        name: '浙江',
      },
    ];

    console.log(helps.findParentsAndSons(allMenus, 5));
  };

  state: State = {
    value: 0,
  };

  handleChange = (value: any): void => {
    this.setState({
      value,
    });
  };

  booksList(data: any) {
    return {
      title: (
        <div className="book-title" dangerouslySetInnerHTML={{ __html: data.original_title }} />
      ),
      description: (
        <div className="flex column justify-space-between">
          <div>
            <div>
              by <span className="authors-list">{data.authors}</span>
            </div>
            <div className="ratings-list flex align-center">
              <span className="stars">
                {Array(data.average_rating_rounded)
                  .fill('x')
                  .map((item, index) => (
                    <i className="fas fa-star" key={index} />
                  )) // eslint-disable-line
                }
              </span>
              <span className="avg-rating">({data.average_rating} avg)</span>
            </div>
          </div>
          <span className="pub-year">Pub {data.original_publication_year}</span>
        </div>
      ),
      image: data.image,
    };
  }

  render() {
    const { form } = this.props;
    const routes = [
      {
        path: 'index',
        breadcrumbName: '测试',
      },
      {
        path: 'first',
        breadcrumbName: '第一',
      },
    ];
    return (
      //@ts-ignore
      <PageHeaderWrapper title={false} breadcrumb={{ routes }}>
        {/*<Authorized authority={['admin']} noMatch={noMatch}>*/}
        {/*<ImageWrapper*/}
        {/*  src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"*/}
        {/*  desc="示意图"*/}
        {/*/>*/}
        <Card title="富文本编辑器">
          {/*<ReactQuill value={this.state.value} onChange={this.handleChange}/>*/}
          <Button
            style={{ marginTop: 16 }}
            onClick={() => {
              console.log('resetFields');
              this.setState({
                value: this.state.value + 1,
              });
              console.log('setState');
            }}
          >
            Prompt
          </Button>
        </Card>

        {form.getFieldDecorator('demo', {
          initialValue: this.state.value,
        })(<Input placeholder={'请输入测试'} />)}
        <div>
          <button onClick={this.hello}>
            测试{this.props.submitting ? 1 : 0}
            {this.props.demoOne.hello}
          </button>
        </div>
        <div dangerouslySetInnerHTML={{ __html: emojiToolkit.toImage(':innocent:') }} />

        {/*<ReactiveBase*/}
        {/*app={"articles"}*/}
        {/*url={"http://106.13.168.150:9200"}*/}
        {/*>*/}
        {/*<div>Hello ReactiveSearch!</div>*/}
        {/*<SingleList componentId="CitySensor" dataField="group.group_city.raw" title="Cities" />*/}
        {/*</ReactiveBase>*/}
      </PageHeaderWrapper>
    );
  }

  // render() {
  //   return (
  //     <div>
  //       <button onClick={this.hello}>
  //         测试{this.props.submitting ? 1 : 0}
  //         {this.props.demoOne.hello}
  //       </button>
  //     </div>
  //   );
  // }
}

export default Form.create()(One);
